<template>
  <div class="exam-initiateexam-page">
    <nav-bar :title="title" theme="blue" message></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <div class="exam-initiateexam">
        <div class="exam-results">
          <p class="exam-results-score">
            {{ questionInfo.score }}
            <span>分</span>
          </p>
          <div class="exam-results-info">
            <span>考试时长：{{ questionInfo.myDurationTime }}</span>
            <span>交卷时间：{{ questionInfo.endTime }}</span>
          </div>
          <div class="exam-results-rate" v-show="curPage === 'answerSheet'">
            <div>
              <p class="exam-results-rate-text">正确率</p>
              <p>{{ questionInfo.correctRate }}%</p>
            </div>
            <div>
              <p class="exam-results-rate-text">错误率</p>
              <p>{{ questionInfo.errorRate }}%</p>
            </div>
            <div>
              <p class="exam-results-rate-text">空答率</p>
              <p>{{ questionInfo.emptyRate }}%</p>
            </div>
          </div>
        </div>
        <!-- 题目 -->
        <div class="exam-initiateexam-box" v-show="curPage === 'question'">
          <van-swipe
            ref="swipe"
            :loop="false"
            :stop-propagation="false"
            :show-indicators="false"
            @change="handleSwipeChange"
          >
            <van-swipe-item v-for="(item, index) in questionList" :key="index">
              <div class="exam-initiateexam-box-swipename">
                <p class="exam-initiateexam-box-swipename-left">
                  {{ typeData.number[index] }}{{ typeData.title[item.typeCode] }}
                  <span>（本题{{ item.score }}分）</span>
                </p>
                <p class="exam-initiateexam-box-swipename-right">
                  <span>{{ index + 1 }}</span>
                  /
                  {{ questionParams.total }}
                </p>
              </div>
              <div class="exam-initiateexam-box-content">
                <div class="exam-initiateexam-box-content-title">{{ item.orderNum + '、' }}{{ item.title }}</div>
                <template v-if="item.typeCode === '1'">
                  <div
                    v-for="(optionItem, optionIndex) in item.option"
                    :key="optionIndex"
                    class="exam-initiateexam-box-content-option"
                  >
                    <p
                      class="title-num"
                      :class="{
                        checked: item.myAnswer === optionItem.itemName && item.myAnswer === item.answer,
                        wrong: item.myAnswer === optionItem.itemName && item.myAnswer !== item.answer
                      }"
                    >
                      {{ optionItem.itemName }}
                    </p>
                    <p class="title-text">{{ optionItem.item }}</p>
                  </div>
                </template>
                <template v-if="item.typeCode === '2'">
                  <div
                    v-for="(optionItem, optionIndex) in item.option"
                    :key="optionIndex"
                    class="exam-initiateexam-box-content-option"
                  >
                    <p
                      class="title-num"
                      :class="{
                        checked: item.myAnswer.indexOf(optionItem.itemName) !== -1 && item.myAnswer === item.answer,
                        wrong: item.myAnswer.indexOf(optionItem.itemName) === -1 && item.myAnswer !== item.answer
                      }"
                    >
                      {{ optionItem.itemName }}
                    </p>
                    <p class="title-text">{{ optionItem.item }}</p>
                  </div>
                </template>
                <template v-if="item.typeCode === '3'">
                  <van-field
                    readonly
                    v-model="item.myAnswer"
                    rows="5"
                    autosize
                    type="textarea"
                    placeholder=""
                    :border="false"
                    class="van-field__value--textarea-lightgray"
                  />
                </template>
              </div>
              <div class="exam-analysis">
                <p class="exam-analysis-answer">
                  参考答案：
                  <span class="color-blue">
                    {{ item.answer }}
                  </span>
                </p>
                <p class="exam-analysis-content">解析：{{ item.analysis }}</p>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 答题卡 -->
        <div class="exam-answer-sheet" v-show="curPage === 'answerSheet'">
          <div style="overflow: hidden" v-for="(order, orderKey, orderIndex) in typeData.number" :key="orderKey">
            <div class="exam-answer-sheet-topic">
              <span class="exam-answer-sheet-topic-span"></span>
              {{ order }}{{ typeData.title[questionList[orderKey].typeCode] }}
            </div>
            <template v-for="(item, index) in questionList">
              <div
                class="exam-answer-sheet-option"
                :key="index"
                v-if="
                  (typeData.numberKeys[orderIndex - 1] === undefined && index < typeData.numberKeys[orderIndex + 1]) ||
                  (typeData.numberKeys[orderIndex + 1] === undefined && index >= typeData.numberKeys[orderIndex]) ||
                  (index < typeData.numberKeys[orderIndex + 1] && index > typeData.numberKeys[orderIndex - 1])
                "
                @click="handleAnswerSheetClick(index)"
              >
                <div
                  class="exam-answer-sheet-option-title"
                  :class="{
                    checked: (item.typeCode === '3' && item.myAnswer) || item.myAnswer === item.answer,
                    wrong: item.typeCode !== '3' && item.myAnswer !== item.answer
                  }"
                >
                  {{ item.orderNum }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- 切换 -->
      <div class="answer-sheet">
        <div class="answer-sheet-answer-center">
          <van-tag type="primary" @click="curPage = curPage === 'question' ? 'answerSheet' : 'question'">
            {{ curPage === 'question' ? '答题卡' : '查看解析' }}
          </van-tag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LearnTest from '@/api/learnTest'
export default {
  data() {
    return {
      title: '',
      curPage: 'question',
      questionInfo: {},
      questionParams: {
        examCode: this.$route.query.code,
        pageNumber: 1,
        recordSize: 0,
        pageSize: 999,
        total: 0
      },
      questionList: [],
      typeData: {
        numberOptions: ['一、', '二、', '三、'],
        numberKeys: [],
        number: {},
        title: {
          1: '单选题',
          2: '多选题',
          3: '问答题'
        }
      }
    }
  },
  computed: {
    clacType() {
      return function (item, key) {
        return !!(!key || (this.questionList[key - 1] && this.questionList[key - 1].typeCode !== item.typeCode))
      }
    }
  },
  mounted() {
    this.getQuestionList()
  },
  methods: {
    // 获取题目
    getQuestionList() {
      this.questionParams.recordSize = this.questionParams.pageSize * (this.questionParams.pageNumber - 1)
      LearnTest.MyExam.questionList(this.questionParams).then(res => {
        const { status, data, message } = res.data
        if (status === 0) {
          this.title = data.title
          this.questionInfo = data
          this.questionList.push(...data.list)
          this.questionParams.total = data.count
          this.$nextTick(() => {
            // 跳转到下一页第一个
            this.$refs.swipe.swipeTo(this.questionParams.recordSize - 1, { immediate: true })
          })
          this.setTypeDivide()
          console.log(this.typeData)
        } else {
          this.$toast(message)
        }
      })
    },
    // 切换题目
    handleSwipeChange(index) {
      if (
        index === this.questionList.length - 1 &&
        Math.ceil(this.questionParams.total / this.questionParams.pageSize) !== this.questionParams.pageNumber
      ) {
        this.questionParams.pageNumber++
        this.getQuestionList()
      }
    },
    // 题目按类型区分
    setTypeDivide() {
      this.typeData.numberKeys = []
      this.typeData.number = {}
      for (let i = 0; i < this.questionList.length; i++) {
        const TypeDivideFlag = this.clacType(this.questionList[i], i)
        if (TypeDivideFlag) {
          this.typeData.number[i] = this.typeData.numberOptions[this.typeData.numberKeys.length]
          this.typeData.numberKeys.push(i)
        }
      }
    },
    // 答题卡切换到题目
    handleAnswerSheetClick(index) {
      this.curPage = 'question'
      this.$refs.swipe.swipeTo(index, { immediate: true })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/learnTest/exam/question.less';
</style>
